<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="提现记录" />
    </template>
    <view class="content">
      <view
        :class="{ 'width-border': this.date }"
        class="brief flex flex-bt fs-32"
      >
        <view>
          <text class="c-60">总计：</text>
          <text class="c-90">￥{{ total }}</text>
        </view>
        <view class="flex">
          <view
            @click="showDatePicker = true"
            class="filter f0 fs-28 c-90 flex flex-a"
          >
            <text class="c-60">{{ showDate }}</text>
            <image
              class="arrow"
              src="../../../assets/images/icons/arrow-down.png"
            />
          </view>
          <view @click="onShowStatus" class="filter f0 fs-28 c-90 flex flex-a">
            <text class="c-60">{{ showStatus }}</text>
            <image
              class="arrow"
              src="../../../assets/images/icons/arrow-down.png"
            />
          </view>
        </view>
      </view>
      <scroll-view
        v-if="list.length"
        :style="statusBarHeight"
        class="list scroll-view"
        :scroll-y="true"
        @scroll="onScroll"
        @scrolltolower="onScrollBottom"
      >
        <view
          v-for="(item, i) in list"
          @click="onDetail(item)"
          :key="i"
          class="item"
        >
          <view class="list-item">
            <view class="num flex flex-bt flex-a">
              <view class="flex flex-a">
                <image
                  v-if="item.accountType != 1"
                  src="../../../assets/images/setting/remain.png"
                ></image>
                <image
                  class="ali"
                  v-else
                  src="../../../assets/images/wallet/ali.png"
                ></image>
                <text class="fs-32 c-60">到账账户</text>
              </view>
              <text
                class="fs-32 bold c-90"
                :class="{ 'active-text': item.status == 1 }"
              >
                {{ item.money }}
              </text>
            </view>
            <view class="name fs-32 c-90 flex flex-bt">
              <text>
                {{ item.bankName || "支付宝" }}（{{
                  hideNumber(item.accountNumber)
                }}）
              </text>
              <text
                class="fs-24"
                :class="{
                  'active-text': item.cashStatus == 2,
                  'fail-text': item.cashStatus == 1,
                }"
                >{{
                  item.cashStatus == 0
                    ? "提现成功"
                    : item.cashStatus == 2
                    ? "提现中"
                    : "提现失败"
                }}</text
              >
            </view>
            <view class="dt c-40 fs-24">发起时间 {{ item.applyTime }}</view>
            <view class="dt c-40 fs-24"
              >到账时间 {{ item.receivedTime || "---" }}</view
            >
          </view>
        </view>
      </scroll-view>
      <Empty v-if="!list.length && !isLoading"> </Empty>
    </view>

    <DatePicker
      @close="showDatePicker = false"
      :show="showDatePicker"
      :defaultVal="dateDefault"
      @confirm="onChooseDate"
      ref="date-picker"
    />
    <u-picker
      style="z-index: 9999"
      title="选择状态"
      :show="showStatusPicker"
      @close="showStatusPicker = false"
      @cancel="onCancel"
      :defaultIndex="statusIndex"
      @confirm="onSelectStatus"
      :columns="columns"
      keyName="name"
      :key="statusKey"
      closeOnClickOverlay
    ></u-picker>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { statusBarHeight } from "../../../assets/utils/config.js";
import { withdrawList, withdrawStatistics } from "../../../api/drawCash";
import {
  formatDate,
  getMonthStartDay,
  getMonthEndDay,
} from "../../../assets/utils/date";
import Empty from "../../../compennts/empty/index.vue";
import DatePicker from "../../../compennts/DatePicker";

export default {
  components: {
    layout,
    pageHead,
    Empty,
    DatePicker,
  },
  data() {
    return {
      showDate: "",
      showDatePicker: false,
      showStatusPicker: false,
      showStatus: "",
      statusKey: 0,
      statusIndex: [0, 0],
      statusBarHeight,
      title: "已结算订单",
      type: 1,
      total: 0,
      date: "",
      isShowFilter: false,
      withBorder: false,
      isLoading: true,
      list: [],
      columns: [
        [
          {
            name: "全部",
            id: null,
          },
          {
            name: "提现成功",
            id: 0,
          },
          {
            name: "提现失败",
            id: 1,
          },
          {
            name: "提现中",
            id: 2,
          },
        ],
      ],
      query: {
        pageNum: 1,
        pageSize: 20,
        cashStatus: null,
        applyTimeStart: null,
        applyTimeEnd: null,
      },
      hasMore: true,
      dateDefault: [0, 0],
    };
  },
  watch: {
    isLoading(val) {
      val ? uni.showLoading() : uni.hideLoading();
    },
  },
  onLoad(d) {
    this.type = d.type;
  },
  mounted() {
    this.getDefaultDate();
  },
  onShow() {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth()+1
    this.query.applyTimeStart = formatDate(getMonthStartDay(0, `${year}/${month}/1`));
    this.query.applyTimeEnd = formatDate(getMonthEndDay(0, `${year}/${month}/1`));
    this.query.pageNum = 1;
    this.getDrawList();
    this.getTotal();
  },
  methods: {
    getDefaultDate() {
      // 默认时间
      const datePickerRef = this.$refs["date-picker"];
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const [yearMap, monthMap] = datePickerRef._data.columns;
      this.showDate = year + "-" + month;
      const yindex = yearMap.findIndex((item) => item == year);
      const mindex = monthMap.findIndex((item) => item == month);
      this.dateDefault = [yindex, mindex];
      this.query.applyTimeStart = formatDate(
        getMonthStartDay(0, `${year}/${month}/1`)
      );
      this.query.applyTimeEnd = formatDate(
        getMonthEndDay(0, `${year}/${month}/1`)
      );
      //默认状态
      this.query.cashStatus = null;
      this.showStatus = "全部";
    },
    onShowStatus() {
      this.statusKey++;
      this.showStatusPicker = true;
    },
    onChooseDate({ indexs, value }) {
      this.dateDefault = indexs;
      let begin = formatDate(getMonthStartDay(0, `${value[0]}/${value[1]}/1`));
      let end = formatDate(getMonthEndDay(0, `${value[0]}/${value[1]}/1`));
      this.showDate = value[0] + "-" + value[1];
      this.query.applyTimeStart = begin;
      this.query.applyTimeEnd = end;
      this.showDatePicker = false;
      this.query.pageNum = 1;
      this.list = [];
      this.getDrawList();
      this.getTotal();
    },
    onFilter() {
      this.isShowFilter = !this.isShowFilter;
    },
    onCancel() {
      this.showStatusPicker = false;
    },
    onSelectStatus(data) {
      this.$set(this.statusIndex, 0, data.indexs[0]);
      this.showStatusPicker = false;
      this.showStatus = data.value[0].name;
      this.query.cashStatus = data.value[0].id;
      console.log(this.query)
      this.query.pageNum = 1;
      this.getDrawList();
      this.getTotal();
    },
    getTotal() {
      withdrawStatistics(this.query).then((res) => {
        this.total = res.data?.money || 0;
      });
    },
    getDrawList(isMore) {
      // if (!this.hasMore) return;
      this.isLoading = true;
      let p = JSON.parse(JSON.stringify(this.query));
      if (!p.applyTimeStart) {
        delete p.applyTimeEnd;
        delete p.applyTimeStart;
      }
      withdrawList(this.query)
        .then((res) => {
          if (!res.rows.length) {
            this.hasMore = false;
          }
          if (isMore) {
            this.list = [...this.list, ...res.rows];
          } else {
            this.list = res.rows;
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    hideNumber(num) {
      return "********" + num.substring(num.length - 4);
    },
    onScroll(e) {
      return;
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll(".target-element")
        .boundingClientRect((data) => {
          data.forEach((item) => {
            const top = parseInt(this.statusBarHeight) + 106;
            if (item.top < top) {
              this.date = item.dataset.date + "月";
            }
            if (item.top >= top && item.dataset.id == 0) {
              this.date = "";
            }
          });
        })
        .exec();
    },
    onScrollBottom() {
      this.query.pageNum++;
      this.getDrawList(true);
    },
    onDetail(info) {
      uni.navigateTo({
        url: `/pages/mine/wallet/drawDetail?id=${info.id}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
@statusbarheight:var (--statusBarHeight);
.content {
  //   padding: 0 32rpx 32rpx 32rpx;
  background: #f7f8ff;
  height: 100%;
  overflow: hidden;
  .brief {
    padding: 32rpx;
    position: sticky;
    top: 0;
    background: #f7f8ff;
    z-index: 999;
    height: 56px;
    width: 100%;
  }
  .width-border {
    border-bottom: 1px solid #e9e9ea;
  }
}
.scroll-view {
  height: calc(100vh - 300rpx);
  border-radius: 16rpx;
  padding: 0 32rpx;
  overflow: hidden;
  .item {
    background: #ffffff;
    padding: 32rpx 32rpx 0 32rpx;
    .date {
      .num {
        font-size: 48rpx;
      }
      .unit {
        margin: 0 10rpx 0 4rpx;
      }
    }
    &:nth-child(1) {
      border-radius: 16rpx 16rpx 0 0;
    }

    .list-item {
      border-bottom: 1px solid #e9e9ea;
      margin-top: 24rpx;
      padding-top: 8rpx;
      padding-bottom: 32rpx;
      image {
        width: 46rpx;
        height: 41rpx;
        margin-right: 6rpx;
        &.ali {
          height: 46rpx;
        }
      }
      .name {
        margin: 22rpx 0;
      }
      .dt {
        margin-top: 8rpx;
      }
      .fail-text {
        color: #fc1313;
      }
    }
  }
}
.filter {
  margin-left: 16rpx;
}
.arrow {
  width: 32rpx;
  height: 32rpx;
  margin-left: 4rpx;
}
</style>
